import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType, filter } from 'graphql-anywhere';
import { StyleSheet, View } from 'react-native';
import { Text, Card, List, ListItem, Button } from 'react-native-elements';
import OrderPriceItem from './OrderPriceItem';
import { primaryColor } from '../utils';

const styles = StyleSheet.create({
  list: {
    marginTop: 0
  },
  header: {
    padding: 8
  },
  rightTitle: {
    color: 'black'
  },
  titleStyle: {
    textAlign: 'center',
    color: primaryColor
  }
});

const OrderPricingTable = ({chinese, pricing:{membership, canUpdate, totalPrice, toPayPrice, details, promotions}, onUpdate}) => {
  return (
    <View>
      <Text style={styles.header}>{chinese?'Items':'Items'}</Text>
      <List containerStyle={styles.list}>
        {
          details&&details.map((detail, index) =>
            <OrderPriceItem key={index} pricingDetail={filter(OrderPriceItem.fragments.pricingDetail, detail)}/>)
        }
        {/* <ListItem hideChevron title={chinese?'总价':'Total Price'} rightTitle={`$${(totalPrice||0).toFixed(2)}`}
          rightTitleStyle={styles.rightTitle}/>
        {
          promotions&&promotions.map((detail, index) =>
            <OrderPriceItem key={index} pricingDetail={filter(OrderPriceItem.fragments.pricingDetail, detail)}/>)
        }
        <ListItem hideChevron title={chinese?'支付价格':'Final Price'} rightTitle={`$${(toPayPrice||0).toFixed(2)}`}
          rightTitleStyle={styles.rightTitle}/>
        {canUpdate&&onUpdate&&
          <ListItem title={chinese?'更改衣物':'Update Items'} titleStyle={styles.titleStyle} onPress={onUpdate} hideChevron/>
        } */}
      </List>
      {/* {membership&&<Text style={styles.header}>{chinese?'返现':'Cash Back'}</Text>}
      {membership&&
        <List containerStyle={styles.list}>
          <ListItem hideChevron roundAvatar avatar={{uri:membership.badge}} subtitle={membership.title}
            title={chinese?`订单完成后$${membership.amount}将自动返现到您的KnocKnocK钱包`:`$${membership.amount} cash back to your KnocKnocK credit after order complete`}
            rightTitleStyle={styles.rightTitle}/>
        </List>
      } */}
    </View>
  );
}

OrderPricingTable.fragments = {
  pricing: gql`
    fragment OrderPricingTable on OrderPricing {
      totalPrice
      toPayPrice
      canUpdate
      membership {
        title
        amount
        badge
      }
      details {
        ...OrderPriceItem
      }
      promotions {
        ...OrderPriceItem
      }
    }
    ${OrderPriceItem.fragments.pricingDetail}
  `
};

OrderPricingTable.propTypes = {
  pricing: propType(OrderPricingTable.fragments.pricing).isRequired
};

export default OrderPricingTable;
